<template>
  <el-dialog
    v-model="dialogFormVisible"
    class="custom-dialog"
    :before-close="closeDialog"
    :close-on-click-modal="closeOnClickModal"
    :title="dialogTitle"
    :width="`${dialogWidth}px`"
    ><div class="padding-lr-sm margin-top-xs">
      <el-table
        ref="multipleTable"
        class="custom-table cell-no-padding"
        border
        :stripe="false"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableData"
      >
        <!-- <el-table-column type="selection" width="50" /> -->

        <el-table-column label="类目" :show-overflow-tooltip="true" prop="typeName" width="150" />
        <el-table-column
          label="分类"
          :show-overflow-tooltip="true"
          prop="classificationName"
          width="150"
        />
        <el-table-column label="审核流" :show-overflow-tooltip="true" prop="processId">
          <template #default="scope">
            <el-select
              v-model="scope.row.processTemplateId"
              placeholder="请选择"
              clearable
              @change="(val) => changeFlow(scope.row, val)"
            >
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              />
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link class="table-button" @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, nextTick, reactive, ref, watch, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';

  import { useStore } from 'vuex';
  import { useSubMenu } from '@/hooks/useSubMenu/index';
  import { getReportProcessList } from '@/api/docReport/index';
  import { postHandbookMenuApprovalRelAdd, getGetList } from '@/api/handbookMenuApprovalRel/index';

  const props = defineProps({
    options: {
      type: Object,
      required: true,
      default: () => {
        return {
          width: 0,
          title: '',
          modal: false,
          visible: false,
          defaultValue: {},
          cancelText: '取消',
          confirmText: '确定',
        };
      },
    },
  });

  const emit = defineEmits(['confirm', 'close']);

  const store = useStore();
  const addRoutes = computed(() => store.state.permission.addRoutes);

  let formData = ref(props.options.defaultValue);
  const isEdit = ref(false);

  const dialogTitle = computed(() => {
    return props.options.title;
  });

  const dialogWidth = computed(() => {
    return props.options.width;
  });

  const closeOnClickModal = computed(() => {
    return props.options.modal;
  });

  // 组件ref
  const dialogFormRef = ref();
  const dialogRules = {};

  function submitForm() {
    emit('confirm');
  }
  function rest() {
    formData.value = {};
    isEdit.value = false;
  }
  const dialogFormVisible = ref(props.options.visible);
  function showDialog() {
    dialogFormVisible.value = true;
    nextTick(() => {
      dialogFormRef.value.resetFields();
    });
  }

  function closeDialog() {
    rest();
    emit('close');
  }

  const processList = ref([]);

  async function getProcessList() {
    let link = await getGetList();
    if (link.code === 200) {
      processList.value = link.data;
    }
  }
  const { getSubMenu, subMenu } = useSubMenu();
  async function getTableData(child) {
    for (let i = 0; i < child.length; i++) {
      const item = child[i];
      await getSubMenu(item.id);

      subMenu.value.forEach((subItem) => {
        let processTemplateId = processList.value.find(
          (processItem) => `${processItem.classification}` === `${subItem?.id}`,
        )?.processTemplateId;

        let tableItem = {
          typeName: item?.meta?.title,
          type: item?.id,
          classification: subItem.id,
          classificationName: subItem.name,
          processTemplateId,
        };
        tableData.value.push(tableItem);
      });
    }
  }
  const changeFlow = async (row, val) => {
    row.processTemplateId = val;
    await postHandbookMenuApprovalRelAdd({
      classification: row.classification,
      processTemplateId: val,
      type: row.type,
    });
  };

  const cateList = ref([]);
  const tableData = ref([]);
  onMounted(async () => {
    const category = 6; //流程类别
    let res = await getReportProcessList({ category });
    if (res.code === 200) {
      cateList.value = res.data;
    }
    await getProcessList();

    const bookCates = addRoutes.value?.find((item) => item.name === 'Book');
    let childList = bookCates.children;
    await getTableData(childList);
  });

  watch(
    () => props.options.visible,
    (val) => {
      dialogFormVisible.value = val;
    },
  );
  watch(
    () => props.options.defaultValue,
    (val) => {
      formData.value = val;
    },
  );
</script>

<style lang="scss" scoped></style>
